<script setup>
import {ref} from "vue";
import { Check, Close } from '@element-plus/icons-vue'
import router from "@/router/index.js";
// 编辑信息
const editInfo = ref({
  title: '',
  dateRange: [],
  desc: '',
  additionalInfo: {
    region: '',
    ethnicity: '',
    phone: '',
    id: '',
    origin: '',
    eduLevel: '',
    live: '',
    stuId: '',
    name: ''
  },
  alarmPlan: '',
  selectedUniversityLevels: []
})
// 量表数据 - 分为7大类（1.1-1.8）
const scales = ref([
  // 1.1 心理健康
  { id: 1, name: '抑郁自评量表（SDS）', value: 'sds', questionNum: 20, isOpenReport: 0, isRepeat: 1 },
  { id: 2, name: '焦虑自评量表（SAS）', value: 'sas', questionNum: 20, isOpenReport: 0, isRepeat: 1 },
  { id: 3, name: '青少年生活事件量表', value: 'asles', questionNum: 57, isOpenReport: 0, isRepeat: 1 },
  { id: 4, name: 'SCL-90症状自评量表', value: 'scl90', questionNum: 90, isOpenReport: 0, isRepeat: 1 },
  { id: 5, name: '情绪自评量表（DASS-21）', value: 'dass21', questionNum: 21, isOpenReport: 0, isRepeat: 1 },
  { id: 6, name: '青春期性心理健康量表', value: 'adolescentSex', questionNum: 40, isOpenReport: 0, isRepeat: 1 },
  
  // 1.2 职业选择
  { id: 7, name: 'MBTI性格类型测试问卷', value: 'mbti', questionNum: 93, isOpenReport: 0, isRepeat: 1 },
  { id: 8, name: '霍兰德职业倾向测验量表', value: 'holland', questionNum: 60, isOpenReport: 0, isRepeat: 1 },
  
  // 1.3 学习心理
  { id: 9, name: '认知灵活性问卷', value: 'cognitiveFlex', questionNum: 20, isOpenReport: 0, isRepeat: 1 },
  { id: 10, name: '学习沉醉感量表', value: 'flowInLearning', questionNum: 30, isOpenReport: 0, isRepeat: 1 },
  { id: 11, name: '时间管理自我监控量表', value: 'timeMgmt', questionNum: 25, isOpenReport: 0, isRepeat: 1 },
  { id: 12, name: '创造性倾向问卷', value: 'creativity', questionNum: 40, isOpenReport: 0, isRepeat: 1 },
  { id: 13, name: '考试心理和行为问题症状自评量表', value: 'examPsych', questionNum: 35, isOpenReport: 0, isRepeat: 1 },
  { id: 14, name: '学习倦怠量表', value: 'burnout', questionNum: 20, isOpenReport: 0, isRepeat: 1 },
  
  // 1.4 学校文化
  { id: 15, name: '师生关系量表', value: 'teacherStudent', questionNum: 30, isOpenReport: 0, isRepeat: 1 },
  { id: 16, name: '青少年学生生活满意度量表', value: 'lifeSatisfaction', questionNum: 40, isOpenReport: 0, isRepeat: 1 },
  
  // 1.5 恋爱关系
  { id: 17, name: '恋爱心理压力源量表', value: 'loveStress', questionNum: 25, isOpenReport: 0, isRepeat: 1 },
  { id: 18, name: '斯腾伯格爱情量表', value: 'sternbergLove', questionNum: 45, isOpenReport: 0, isRepeat: 1 },
  
  // 1.6 人格特质
  { id: 19, name: '心理韧性量表', value: 'resilience', questionNum: 25, isOpenReport: 0, isRepeat: 1 },
  { id: 20, name: '自我认同感量表', value: 'selfIdentity', questionNum: 30, isOpenReport: 0, isRepeat: 1 },
  { id: 21, name: '大五人格量表简化版', value: 'bigFive', questionNum: 50, isOpenReport: 0, isRepeat: 1 },
  { id: 22, name: '艾森克人格问卷（EPQ）', value: 'epq', questionNum: 88, isOpenReport: 0, isRepeat: 1 },
  { id: 23, name: '情商测试量表', value: 'eq', questionNum: 33, isOpenReport: 0, isRepeat: 1 },
  { id: 24, name: '卡特尔16种性格因素人格测验', value: '16pf', questionNum: 187, isOpenReport: 0, isRepeat: 1 },
  { id: 25, name: 'Rosenberg自尊量表', value: 'rosenberg', questionNum: 10, isOpenReport: 0, isRepeat: 1 },
  
  // 1.7 家庭关系
  { id: 26, name: '家庭亲合量表', value: 'familyCohesion', questionNum: 20, isOpenReport: 0, isRepeat: 1 },
  { id: 27, name: '社会支持评定量表', value: 'socialSupport', questionNum: 12, isOpenReport: 0, isRepeat: 1 },
  { id: 28, name: '父母教养方式问卷', value: 'parentingStyle', questionNum: 66, isOpenReport: 0, isRepeat: 1 },
  { id: 29, name: '双元孝道信念量表', value: 'filialPiety', questionNum: 20, isOpenReport: 0, isRepeat: 1 },
  
  // 1.8 人际关系
  { id: 30, name: '人际关系综合诊断量表', value: 'interpersonal', questionNum: 28, isOpenReport: 0, isRepeat: 1 },
  { id: 31, name: '社交焦虑量表', value: 'socialAnxiety', questionNum: 17, isOpenReport: 0, isRepeat: 1 },
  { id: 32, name: '人际信任量表（ITS）', value: 'interpersonalTrust', questionNum: 25, isOpenReport: 0, isRepeat: 1 }
])
// 选择组织结构数据 - 河南工业和信息化职业学院四级结构
const universityOptions = ref([
  {
    value: '河南工业和信息化职业学院',
    label: '河南工业和信息化职业学院',
    children: [
      {
        value: '计算机应用技术',
        label: '计算机应用技术',
        children: [
          {
            value: '2025级',
            label: '2025级',
            children: [
              { value: '1班', label: '1班' },
              { value: '2班', label: '2班' },
              { value: '3班', label: '3班' },
            ],
          },
          {
            value: '2024级',
            label: '2024级',
            children: [
              { value: '1班', label: '1班' },
              { value: '2班', label: '2班' },
              { value: '3班', label: '3班' },
            ],
          },
          {
            value: '2023级',
            label: '2023级',
            children: [
              { value: '1班', label: '1班' },
              { value: '2班', label: '2班' },
              { value: '3班', label: '3班' },
            ],
          },
          {
            value: '2022级',
            label: '2022级',
            children: [
              { value: '1班', label: '1班' },
              { value: '2班', label: '2班' },
              { value: '3班', label: '3班' },
            ],
          },
        ],
      },
    ],
  },
])
</script>

<template>
  <h3>编辑计划</h3>
  <el-scrollbar height="520px">
    <div class="w">
      <div class="w-title">
        <div class="blue-col"></div>基本信息
      </div>
      <el-form :model="editInfo" label-width="100" style="max-width: 600px">
        <el-form-item label="计划标题" required>
          <el-input v-model="editInfo.title" placeholder="输请入标题"/>
        </el-form-item>

        <el-form-item label="时间区间" required>
          <el-date-picker
              v-model="editInfo.dateRange"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="计划描述" required>
          <el-input
              v-model="editInfo.desc"
              style="width: 100%;"
              :autosize="{ minRows: 2, maxRows: 4 }"
              autosize
              type="textarea"
              placeholder="请输入计划描述"
          />
        </el-form-item>
        <el-form-item label="补充信息" required>
          <el-checkbox v-model="editInfo.additionalInfo.region" label="地区" size="large" />
          <el-checkbox v-model="editInfo.additionalInfo.ethnicity" label="民族" size="large" />
          <el-checkbox v-model="editInfo.additionalInfo.phone" label="联系方式" size="large" />
          <el-checkbox v-model="editInfo.additionalInfo.id" label="身份证号" size="large" />
          <el-checkbox v-model="editInfo.additionalInfo.origin" label="籍贯" size="large" />
          <el-checkbox v-model="editInfo.additionalInfo.live" label="居住情况" size="large" />
          <el-checkbox v-model="editInfo.additionalInfo.stuId" label="学号" size="large" />
          <el-checkbox v-model="editInfo.additionalInfo.eduLevel" label="学历" size="large" />
          <el-checkbox v-model="editInfo.additionalInfo.name" label="姓名" size="large" />
        </el-form-item>
        <el-form-item label="报警方案" required>
          <el-select v-model="editInfo.alarmPlan" placeholder="请选择报警方案" style="width: 200px">
            <el-option label="方案1" :value="1"/>
            <el-option label="方案2" :value="2"/>
            <el-option label="方案3" :value="3"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="w-title">
        <div class="blue-col"></div>量表选择
      </div>
      <!-- 量表 -->
      <div style="margin-top: 10px">
        <el-table :data="scales" style="width: 100%" :header-cell-style="{ 'background-color': '#f5f7fa' }">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column prop="name" label="量表名" width="150"  align="center"/>
          <el-table-column prop="questionNum" label="题量" width="80"  align="center"/>
          <el-table-column label="开放报告" width="100" align="center">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.isOpenReport"
                  class="mt-2"
                  inline-prompt
                  :active-icon="Check"
                  :inactive-icon="Close"
              />
            </template>
          </el-table-column>
          <el-table-column label="重复试验" width="100" align="center">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.isRepeat"
                  class="mt-2"
                  inline-prompt
                  :active-icon="Check"
                  :inactive-icon="Close"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="w-title">
        <div class="blue-col"></div>组织结构
      </div>
      <div style="margin-top: 10px;margin-bottom: 20px">
        <el-cascader :options="universityOptions" clearable style="width: 95%" v-model="editInfo.selectedUniversityLevels"/>
      </div>
      <div style="margin-top: 50px;margin-left: 60px;margin-bottom: 100px">
        <el-button type="primary" @click="router.push('/evaluation/editplannext')">下一步</el-button>
      </div>
    </div>
  </el-scrollbar>
</template>

<style scoped>
h3 {
  text-align: center;
  padding: 10px 0;
  background-color: #e8f4ff;
}
.w {
  margin: 10px auto 0;
  width: 50%;
  min-height: 900px;
}
.w-title {
  margin-top: 20px;
  display: flex;
  align-items: center;
  font-weight: 600;
}
.blue-col {
  margin-right: 10px;
  display: inline-block;
  height: 20px;
  width: 7px;
  background-color: #44a4ff;
}
</style>